<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="订单续费"></u-navbar>
		<view class="margin-sm padding-sm bg-white radius">
			<view class="text-gray">续费开始时间</view>
			<view class="margin-top-sm text-black text-bold text-lg">{{orderDetalist.EndTime}}</view>
		</view>
		<view class="margin-sm padding-sm bg-white radius">
			<view @click="showRoomPicker=true" class="flex align-center justify-between">
				<view>选择房间</view>
				<view>
					<text class="text-bold">{{orderDetalist.RoomName}}</text>
					<text class="text-bold margin-left-xs cuIcon-right"></text>
				</view>
			</view>
			<u-line dashed margin="20rpx 0px 20rpx 0"></u-line>
			<view @click="showTimePicker=true" class="flex align-center justify-between">
				<view>结束时间</view>
				<view>
					<text class="text-bold">{{$u.timeFormat(endTime, 'yyyy年mm月dd日 hh时MM分')}}</text>
					<text class="text-bold margin-left-xs cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="margin-sm padding-sm bg-white radius">
			<view class="flex align-center justify-between">
				<view>合计时长</view>
				<text class="text-bold">{{selectHours}}小时</text>
			</view>
			<u-line dashed margin="20rpx 0px 20rpx 0"></u-line>
			<view class="flex align-center justify-between">
				<view>结算费用</view>
				<view v-if="memberInfo.isMember" class="flex flex-direction align-end">
					<text class="text-gray text-sm text-price"
						style="text-decoration: line-through; ">{{renewPrice.price}}</text>
					<text class="margin-top-xs text-tea text-bold text-price">{{renewPrice.memberPrice}}</text>
				</view>
				<view v-else class=" text-bold text-price">
					{{renewPrice.price}}
				</view>
			</view>
		</view>
		<view class="margin-sm padding-sm bg-white radius">
			<view class="flex align-center justify-between">
				<view>支付方式</view>
				<view class="flex flex-direction align-center">
					<view class="text-tea">
						<text class="cuIcon-moneybagfill"></text>
						<text class="margin-left-xs">余额</text>
					</view>
					<view class="text-tea">{{memberInfo.balance}}元</view>
				</view>
			</view>
		</view>
		<u-datetime-picker immediateChange @cancel="showTimePicker=false" title="选择结束时间" :show="showTimePicker"
			v-model="endTime" :minDate="minDate" :maxDate="maxDate" @confirm="confirmEndTime" mode="datetime">
		</u-datetime-picker>

		<u-picker immediateChange :show="showRoomPicker" :columns="roomList" keyName="Name"
			@cancel="showRoomPicker=false" @confirm="changeRoom"></u-picker>

		<view style="position: fixed;bottom:0px;left: 0px;width: 100%">
			<view class="flex align-center justify-center">
				<button class="cu-btn bg-tea " style="width: 88%;" @click="fastRenewOrder">立即续费</button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomList: [],
				orderDetalist: {},
				memberInfo: {},
				showTimePicker: false, //展示时间选择
				changeRoomId: '',
				minDate: '',
				maxDate: '',
				endTime: '',
				showRoomPicker: false,
				selectHours: 0, //共计时长
				renewPrice: {
					memberPrice: 0, //会员价格，
					price: 0, //非会员价格
				},
				orderId: '',
				changeOrderStatusTotal: 0,
			}
		},
		onLoad(_params) {
			this.orderId = _params.orderId;
			this.getRoomListByOrderId();
			this.getOrderDetalis();
		},
		methods: {
			//立即续费
			fastRenewOrder() {
				uni.showLoading();
				uni.$u.http.post('/Customer/ConfirmRenewOrder', {
					orderId: this.orderId,
					roomId: this.changeRoomId,
					endTime: this.changeEndTime,
					startTime: this.orderDetalist.EndTime
				}).then(res => {
					if (res.status == -2) {
						uni.showModal({
							title: '提示',
							content: '当前余额(' + this.memberInfo.balance + '元)不足，是否跳转到充值页面？',
							showCancel: true,
							success: function(e) {
								if (!e.confirm) {
									return;
								}
								uni.navigateTo({
									url: '/pagesA/member/storedcard'
								})
							}
						})
						return;
					}
					if (res.status != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return;
					}
					uni.redirectTo({
						url: '/pagesB/layout/orderpaysuc?orderId=' + res.data.orderId
					})

				});
			},
			//选择了结束时间
			confirmEndTime(e) {
				this.showTimePicker = false;
				//计算时长，并计算金额
				this.changeEndTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
				//let orderEndTime=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');

				//console.log(this.orderDetalist.EndTime);
				//console.log(Date.parse(this.changeEndTime));
				//console.log(Date.parse(this.orderDetalist.EndTime));

				let _c_year = uni.$u.timeFormat(e.value, 'yyyy');
				let _c_month = uni.$u.timeFormat(e.value, 'mm');
				let _c_day = uni.$u.timeFormat(e.value, 'dd');
				let _c_hour = uni.$u.timeFormat(e.value, 'hh');
				let _c_minu = uni.$u.timeFormat(e.value, 'MM');

				let cTime = new Date(_c_year, _c_month, _c_day, _c_hour, _c_minu, 0);

				let _e_year = uni.$u.timeFormat(this.orderDetalist.EndTime, 'yyyy');
				let _e_month = uni.$u.timeFormat(this.orderDetalist.EndTime, 'mm');
				let _e_day = uni.$u.timeFormat(this.orderDetalist.EndTime, 'dd');
				let _e_hour = uni.$u.timeFormat(this.orderDetalist.EndTime, 'hh');
				let _e_minu = uni.$u.timeFormat(this.orderDetalist.EndTime, 'MM');

				let eTime = new Date(_e_year, _e_month, _e_day, _e_hour, _e_minu, 0);

				let cha = parseInt(Date.parse(cTime) - Date.parse(eTime)) /
					1000 / 60;
				//console.log(cha)


				this.selectHours = parseFloat(cha / 60).toFixed(1);
				//计算房间续费需要的金额
				uni.$u.http.post('/Customer/ComputeRenewPrice', {
					roomId: this.changeRoomId,
					endTime: this.changeEndTime,
					startTime: this.orderDetalist.EndTime
				}).then(res => {
					this.renewPrice = res.data;
				})
			},
			getOrderDetalis() {
				uni.showLoading();
				uni.$u.http.post('/Customer/CheckUserIsVip').then(res => {
					this.memberInfo = res.data;
				});
				uni.$u.http.post('/Customer/GetOrderDetalis', {
					orderId: this.orderId
				}).then(res => {
					this.orderDetalist = res.data.order;
					this.changeRoomId = res.data.order.RoomId;
					this.getTimeSlot();
				})
			},
			changeRoom(e) {
				this.showRoomPicker = false;
				this.changeRoomId = e.value[0].Id;
				this.orderDetalist.RoomName = e.value[0].Name;
				this.getTimeSlot();
			},
			//获取房间可选时间段
			getTimeSlot() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetRenewOrderTimeSlot', {
					orderId: this.orderId,
					roomId: this.changeRoomId
				}).then(res => {
					this.showTimePicker = true;
					this.minDate = res.data.minDate;
					this.maxDate = res.data.maxDate;
					this.showTimePicker = true;
				});
			},
			getRoomListByOrderId() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetRoomListByOrderId', {
					orderId: this.orderId
				}).then(res => {
					this.roomList = [];
					this.roomList.push(res.data);
				});
			},
			goBack() {
				uni.navigateBack();
			}

		}
	}
</script>

<style scoped>

</style>
